<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  import { VolumeStatus } from '../types/vtuber';
  const emit = createEventDispatcher();
  export let volumeStatus: VolumeStatus = VolumeStatus.Normal;
  export let openAnimationSign: boolean = false;
</script>

<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="head-control {openAnimationSign ? 'move-animation' : ''}">
  {#if volumeStatus}
    <div class="img-container" title="静音" on:click={() => emit('toggleVolume')}>
      <img
        src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/18e0cb57-6d4a-4cb8-8e23-5232c4d8d740.png"
        alt=""
      />
    </div>
  {:else}
    <div class="img-container" title="取消静音" on:click={() => emit('toggleVolume')}>
      <img
        src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/94bc0a5c-0a70-49a2-ad41-bd4d26481377.png"
        alt=""
      />
    </div>
  {/if}
  <div class="img-container" title="最小化" on:click={() => emit('setMin')}>
    <img
      src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/545c7743-e334-4f48-a5ac-18a333fe3f02.png"
      alt=""
    />
  </div>
  <div class="img-container" title="关闭" on:click={() => emit('setEnd')}>
    <img
      src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/651952b0-a3b3-4518-957c-316c7a1821c0.png"
      alt=""
    />
  </div>
</div>

<style lang="less">
  .head-control {
    height: 24px;
    box-sizing: border-box;
    margin-top: 16px;
    margin-right: 8px;
    display: flex;
    justify-content: flex-end;
    transform: translateY(-10px);
    opacity: 0;
    transition:
      transform 0.4s,
      opacity 0.4s;
    &.move-animation {
      opacity: 1;
      transform: translateY(0);
    }
    .img-container {
      width: 24px;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      margin-right: 8px;
      border-radius: 2px;
      cursor: pointer;
      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }
      img {
        width: 16px;
        height: 16px;
      }
    }
  }
</style>
